<!--
 * 商户详情查看页面
 * 基于 miaoma/merchantinfo/detail.vue 修改
-->

<template>
  <a-modal
    v-model:open="drawerVisible"
    title="商户详情"
    centered
    :footer="null"
    @cancel="closeModal"
    :width="600"
    :height="700"
    wrapClassName="merchant-detail-modal"
  >
    <div class="merchant-detail-content">
      <!-- 商户头部信息 -->
      <div class="merchant-header">
        <div class="merchant-icon">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
            <rect width="48" height="48" rx="8" fill="#4F7CFF"/>
            <path d="M16 20h16v2H16v-2zm0 4h16v2H16v-2zm0 4h12v2H16v-2z" fill="white"/>
            <path d="M14 16h20a2 2 0 012 2v12a2 2 0 01-2 2H14a2 2 0 01-2-2V18a2 2 0 012-2z" stroke="white" stroke-width="1.5" fill="none"/>
          </svg>
        </div>
        <div class="merchant-info">
          <div class="merchant-title">
            <span class="merchant-name">{{ itemDetail.merchantName || '商户名称' }}</span>
            <a-tag
              :color="getStatusColor(itemDetail.status)"
              :class="itemDetail.status === 0 ? 'status-disabled' : ''"
            >
              {{ getStatusText(itemDetail.status) }}
            </a-tag>
          </div>
          <div class="merchant-id">{{ itemDetail.merchantId }}</div>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="info-section info-section-with-bg">
        <h3 class="section-title">基本信息</h3>
        <div class="info-content">
          <div class="info-item">
            <span class="info-label">商户名称</span>
            <span class="info-value">{{ itemDetail.merchantName || '待添加' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">商户ID</span>
            <span class="info-value">{{ itemDetail.merchantId }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">所属服务商</span>
            <span class="info-value">{{ getProviderName(itemDetail.providerId) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">创建时间</span>
            <span class="info-value">{{ formatDate(itemDetail.createdTime) }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">最近修改</span>
            <span class="info-value">{{ formatDate(itemDetail.updatedTime) }}</span>
          </div>
        </div>
      </div>

      <!-- 联系信息 -->
      <div class="info-section info-section-with-bg">
        <h3 class="section-title">联系信息</h3>
        <div class="info-content">
          <div class="info-item">
            <span class="info-label">联系人</span>
            <span class="info-value">{{ itemDetail.contactName || '待添加' }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">联系电话</span>
            <span class="info-value">{{ itemDetail.contactTelephone || '待添加' }}</span>
          </div>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="info-section info-section-with-bg">
        <h3 class="section-title">其他信息</h3>
        <div class="info-content">
          <div class="info-item">
            <span class="info-label">备注</span>
            <span class="info-value">{{ itemDetail.remark || '无' }}</span>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { Merchant } from "@/mock/merchants";
import { serviceProviders } from "@/mock/service-providers";

const drawerVisible = ref(false);
const itemDetail = ref<Partial<Merchant>>({});

// 获取状态颜色
function getStatusColor(status: number | undefined) {
  if (status === 0) return undefined; // 停用状态使用自定义CSS类
  switch (status) {
    case 1: // 启用
      return 'green';
    case 2: // 审核中
      return 'orange';
    case 3: // 审核失败
      return 'red';
    default:
      return 'default';
  }
}

// 获取状态文本
function getStatusText(status: number | undefined) {
  switch (status) {
    case 0:
      return '停用';
    case 1:
      return '启用';
    case 2:
      return '审核中';
    case 3:
      return '审核失败';
    default:
      return '未知';
  }
}

// 获取服务商名称
function getProviderName(providerId: string | undefined) {
  if (!providerId) return '待添加';
  const provider = serviceProviders.find(p => p.providerId === providerId);
  return provider ? provider.providerName : providerId;
}

const formatDate = (dateStr: string | undefined): string => {
  if (!dateStr) return '待添加';
  const date = new Date(dateStr);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '/').replace(/,/g, '');
};

function openModal(item: Merchant) {
  itemDetail.value = { ...item };
  drawerVisible.value = true;
}

function closeModal() {
  drawerVisible.value = false;
  itemDetail.value = {};
}

defineExpose({ openModal });
</script>

<style scoped>
.merchant-detail-modal :deep(.ant-modal-content) {
  padding: 0;
  border-radius: 12px;
}

.merchant-detail-modal :deep(.ant-modal-header) {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 12px 12px 0 0;
}

.merchant-detail-modal :deep(.ant-modal-title) {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.merchant-detail-modal :deep(.ant-modal-body) {
  padding: 0;
}

.merchant-detail-content {
  padding: 24px;
}

.merchant-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.merchant-icon {
  flex-shrink: 0;
}

.merchant-info {
  flex: 1;
}

.merchant-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.merchant-name {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  line-height: 1.4;
}

/* 停用状态自定义样式 */
.status-disabled {
  background-color: rgba(140, 140, 140, 0.1) !important;
  border-color: #8c8c8c !important;
  color: #8c8c8c !important;
}

.merchant-id {
  font-size: 14px;
  color: #8c8c8c;
  line-height: 1.4;
}

.info-section {
  margin-bottom: 24px;
}

.info-section:last-child {
  margin-bottom: 0;
}

.info-section-with-bg {
  background-color: #fafafa;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  margin-bottom: 12px;
  line-height: 1.4;
}

.info-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  padding: 5px 0;
}

.info-label {
  flex-shrink: 0;
  width: 120px;
  font-size: 13px;
  color: #595959;
  line-height: 1.5;
  font-weight: 400;
}

.info-value {
  flex: 1;
  font-size: 13px;
  color: #262626;
  line-height: 1.5;
  word-break: break-all;
}

.info-value:empty::before {
  content: '待添加';
  color: #bfbfbf;
}
</style>